{template 'mroles/header'}
<link rel="stylesheet" href="../addons/mx_shop/resources/mroles_web/css/pagination/pagination.css">
<script src="../addons/mx_shop/resources/mroles_web/js/plugins/echart/echarts.min.js"></script>
<script src="../addons/mx_shop/resources/mroles_web/js/plugins/pagination/jquery.pagination.js"></script>
<style>
    -webkit-scrollbar-track{background: #f00;}
    .table{margin-bottom: 0;}
    nav{text-align: center;}
    .M-box .active, .M-box1 .active, .M-box2 .active, .M-box3 .active, .M-box4 .active{
        background: transparent;
        border: 1px solid #1890ff;
        color: #1890ff;
    }
    .M-box, .M-box1, .M-box2, .M-box3, .M-box4{
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .M-box a:hover,.M-box1 a:hover,.M-box2 a:hover,.M-box3 a:hover,.M-box4 a:hover{
        color:#fff;
        background: #1890ff;
    }
    .M-box a, .M-box1 a, .M-box2 a, .M-box3 a, .M-box4 a{
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 2px;
        border-radius: 2px;
    }
    .M-box .active, .M-box1 .active, .M-box2 .active, .M-box3 .active, .M-box4 .active{
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 2px;
        border-radius: 2px;
    }
    .row{
        margin-top: 20px;
    }
    .ibox-title{
        border-color: transparent;
    }
    .num p{
        font-size: 18px;
    }

    #month{width: 100%;height: 400px; }
    #visit,#xian{width: 100%;height: 300px;}
</style>
<body>

<div class="row">
    <div class="col-sm-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <div class="num clearfix">
                    <p class="fr">订单总数：188</p>
                    <p class="fr" style="margin-right: 20px;">总订单金额：18,950.30</p>

                </div>
                <h5>门店订单数排行</h5>
            </div>
            <div class="ibox-content">

                <table class="table">
                    <thead>
                    <tr>
                        <th>排名</th>
                        <th>门店名称</th>
                        <th>订单数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>广州鸿德国际大酒店</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>广州鸿德国际大酒店</td>
                        <td>300</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>广州鸿德国际大酒店</td>
                        <td>200</td>
                    </tr>
                    </tbody>
                </table>
                <div class="M-box"></div>
            </div>

        </div>
    </div>

    <div class="col-sm-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <div class="num clearfix">
                    <p class="fr">订单总数：188</p>
                    <p class="fr" style="margin-right: 20px;">总订单金额：18,950.30</p>
                </div>
                <h5>门店订单金额排行</h5>
            </div>
            <div class="ibox-content">

                <table class="table">
                    <thead>
                    <tr>
                        <th>排名</th>
                        <th>门店名称</th>
                        <th>订单金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>男</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>李四</td>
                        <td>男</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>王麻子</td>
                        <td>男</td>
                    </tr>
                    </tbody>
                </table>
                <div class="M-box2"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-10">
        <div id="month"></div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div id="visit"></div>
    </div>
    <div class="col-sm-6">
        <div id="xian"></div>
    </div>
</div>


<script>
    $(".M-box").pagination({
        totalData:100,
        showData:10,
        coping:true
    });
    $(".M-box2").pagination({
        totalData:100,
        showData:10,
        coping:true
    });

    var resizeWorldMapContainer=function(){
        var month=document.getElementById('month'),
            visit=document.getElementById('visit'),
            xian=document.getElementById('xian');
        month.style.width=month.innerWidth+'px';
        visit.style.width=visit.innerWidth+'px';
        xian.style.width=xian.innerWidth+'px';

    };

    //月份
    var myChartMonth = echarts.init(document.getElementById('month'));
    optionMonth = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                barWidth: '30%',
                data:[10, 52, 200, 334, 390, 330, 220,200, 334, 390, 330, 220],
            }
        ]
    };
    myChartMonth.setOption(optionMonth);

    //访问
    var myChartVisit=echarts.init(document.getElementById('visit'));
    optionVisit = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center',
            top:'50'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            left: '20',
//            top:'10',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '65%'],
                color:["#975fe5","#f2637b","#3aa1ff","#36cbcb","#4ecb73"],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:154, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChartVisit.setOption(optionVisit);

    //折线
    var myChartXian=echarts.init(document.getElementById('xian'));
    optionXian = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        /*toolbox: {
            feature: {
                saveAsImage: {}
            }
        },*/
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    myChartXian.setOption(optionXian);


    window.onresize=function(){
        resizeWorldMapContainer();
        myChartMonth.resize();
        myChartVisit.resize();
        myChartXian.resize();
    }
</script>
</body>
</html>